<template name="randomNine">
	<!-- 任选九 -->
	<view>
		<view class="holder1">
			<view class="itemBlock_time">
				<view class="stageNum">第2021057期</view>
				<view class="endTime">截止时间:<text class="time_fontColor">10小时0分24秒</text></view>
			</view>
			<view class="optional_row" v-for="(item,index)  in  backstage" :key="index">
				<view class="match_left">
					<view class="number">{{item.num}}</view>
					<view class="name">{{item.name}}</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="match_float"> 
					<view class="win_flex" v-for="(datas,n) in item.game" :key="n" :class="datas.isClick?'win_bg':''" @click="clickItem(index,n,datas.isClick)">
						<view class="TeamName">{{datas.name}}</view> 
						<view class="Victory_defeat">{{datas.branch}}</view>
					</view>
					<!-- 	<view class="flat_flex"></view>
					<view class="transport_flex"></view> -->
				</view>
			</view>


		</view>
		<view class="bot">
			<!-- <view class="num flex">
				共<text>0</text>注<text>0</text>元
			</view> -->
			<view class="oper flex-bc">
				<uni-icons type="trash" size="24" color="#666"></uni-icons>
				<text class="warmming">{{warmming}}</text>
				<view class="buyBtn flex-c">
					<text>投注</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: 'randomNine',
		data() {
			return {
				warmming: '至少选择九场比赛',
				backstage: [{
					num: "001",
					name: "德甲",
					time: "03-13 01:00",
					game: [{
							name: "多特",
							branch: "主胜2.55",
							isClick:false
						},
						{
							name: "VS",
							branch: "平2.55",
							isClick:false
						},
						{
							name: "勒沃",
							branch: "客胜2.55",
							isClick:false
						}
					]
				}, {
					num: "001",
					name: "德甲",
					time: "03-13 01:00",
					game: [{
							name: "多特",
							branch: "主胜2.55",
							isClick:false
						},
						{
							name: "VS",
							branch: "平2.55",
							isClick:false
						},
						{
							name: "勒沃",
							branch: "客胜2.55",
							isClick:false
						}
					]
				}, {
					num: "001",
					name: "德甲",
					time: "03-13 01:00",
					game: [{
							name: "多特",
							branch: "主胜2.55",
							isClick:false
						},
						{
							name: "VS",
							branch: "平2.55",
							isClick:false
						},
						{
							name: "勒沃",
							branch: "客胜2.55",
							isClick:false
						}
					]
				}],


			}
		},
		created() {
			
		},
		methods: {
			clickItem(a, b, status) {
				this.backstage.forEach((item, index) => {
					if (index == a) {
						item.game.forEach((item1, index1) => {
							if (index1 == b) {
								item1.isClick = !item1.isClick
							}
						})
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.win_border1 {
		border-left: 1px solid #E3E3E3;
		border-right: 1px solid #E3E3E3;
	}

	.match_left {
		flex: 1;
		text-align: center;

		.number,
		.name {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.time {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666;
		}
	}

	.TeamName {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.Victory_defeat {
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #666;
	}

	.transport_flex,
	.flat_flex,
	.win_flex {
		text-align: center;
		padding: 18rpx 0;
		flex: 3;
	}

	.win_bg {
		background-color: red;
	}

	// .win_bg_no {
	// 	background-color: transparent;
	// }

	.flat_flex {
		border-left: 1px solid #E3E3E3;
		border-right: 1px solid #E3E3E3;
	}


	.match_float {
		border: 1px solid #E3E3E3;
		width: 570rpx;
		height: 100%;
		float: right;
		// background: #FCFDFF;
		display: flex;
		justify-content: center;
	}

	.optional_row {
		box-sizing: border-box;
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		padding: 24rpx 20rpx 24rpx 15rpx;
		margin-top: 1rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
	}



	.itemBlock_time {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		box-sizing: border-box;
		width: 100%;
		height: 74rpx;
		background: #FFFFFF;
		padding: 0 20rpx;

		.stageNum,
		.endTime {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666;
			line-height: 74rpx;
		}
	}



	.holder1 {
		// height: 192rpx;
		height: 104rpx;
	}

	.bot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		font-size: 28rpx;
		color: #666;

		.num {
			width: 100%;
			height: 88rpx;
			background: #eee;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;

			text {
				color: #F22F29;
				margin: 0 10rpx;
			}
		}

		.oper {
			width: 100%;
			height: 104rpx;
			background: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;

			.buyBtn {
				width: 209rpx;
				height: 74rpx;
				background: #F22F29;
				border-radius: 37rpx;
				color: #fff;
			}
		}
	}
</style>
